<template>
  <div>
    <van-sticky :offset-top="46">
      <van-tree-select
          v-model:active-id="activeIds"
          v-model:main-active-index="activeIndex"
          :items="items"
          @click-nav="clickNav"
          @click-item="clickItem"
          height="100%"/>
    </van-sticky>
  </div>
</template>

<script>
import {Dialog} from 'vant'
import filterMovieAPI from '../../api/filterMovieAPI.js'
import bus from '@/utils/EventBus.js'

export default {
  data() {
    return {
      textList: {},
      activeIds: [],
      activeIndex: -1,
      items: [
        {
          text: '排名',
          children: [
            {text: '1-50', id: 1, disabled: false},
            {text: '51-100', id: 2, disabled: false},
            {text: '101-150', id: 3, disabled: false},
            {text: '151-200', id: 4, disabled: false},
            {text: '201-250', id: 5, disabled: false}
          ]
        },
        {
          text: '国家',
          children: [
            {text: '中国大陆', id: 101, disabled: false},
            {text: '中国香港', id: 102, disabled: false},
            {text: '美国', id: 103, disabled: false},
            {text: '法国', id: 104, disabled: false},
            {text: '日本', id: 105, disabled: false},
            {text: '英国', id: 106, disabled: false},
            {text: '意大利', id: 107, disabled: false},
            {text: '印度', id: 108, disabled: false},
            {text: '其他国家', id: 109, disabled: false}
          ]
        },
        {
          text: '类型',
          children: [
            {text: '剧情', id: 201, disabled: false},
            {text: '犯罪', id: 202, disabled: false},
            {text: '爱情', id: 203, disabled: false},
            {text: '科幻', id: 204, disabled: false},
            {text: '动作', id: 205, disabled: false},
            {text: '灾难', id: 206, disabled: false},
            {text: '悬疑', id: 207, disabled: false},
            {text: '战争', id: 208, disabled: false},
            {text: '动画', id: 209, disabled: false}
          ]
        },
        {
          text: '确认'
        },
        {
          text: '清空'
        }
      ]
    }
  },
  methods: {
    clearItem() {
      this.activeIds = []
      this.items.forEach(item => {
        item.children.forEach(child => {
          child.disabled = false
        })
      })
    },
    clickNav() {
      if (this.activeIndex === 3) {
        Dialog.confirm({
          title: '筛选结束了吗？',
          message: '将为你展示筛选结果...'
        })
            .then(() => {
              this.$message.success('筛选成功')
              this.activeIndex = -1
              this.textList = {}
              this.activeIds.forEach(active => {
                if (active > 0 && active < 100) {
                  const arr = this.items[0].children.filter(item => item.id === active)
                  this.textList['rating'] = arr[0].text
                }
                if (active > 100 && active < 200) {
                  const arr = this.items[1].children.filter(item => item.id === active)
                  this.textList['country'] = arr[0].text
                }
                if (active > 200 && active < 300) {
                  const arr = this.items[2].children.filter(item => item.id === active)
                  this.textList['category'] = arr[0].text
                }
              })
              filterMovieAPI(this.textList).then(res => {
                console.log(res.data.data)
                bus.$emit('filter', res.data.data)
              })
              this.clearItem()
            })
            .catch(() => {
              this.activeIndex = -1
            })
      }
      if (this.activeIndex === 4) {
        Dialog.confirm({
          title: '要清空所有筛选条件吗？',
          message: '清空后要重新选择哦...'
        })
            .then(() => {
              this.$message.success('清空成功')
              this.activeIndex = -1
              this.clearItem()
            })
            .catch(() => {
              this.activeIndex = -1
            })
      }
    },
    clickItem() {
      let id = this.activeIds[this.activeIds.length - 1]
      if (id > 0 && id < 10)
        this.items[0].children
            .filter(item => item.id !== id)
            .forEach(item => (item.disabled = true))
      else if (id > 100 && id < 200)
        this.items[1].children
            .filter(item => item.id !== id)
            .forEach(item => (item.disabled = true))
      if (id > 200 && id < 300)
        this.items[2].children
            .filter(item => item.id !== id)
            .forEach(item => (item.disabled = true))
    }
  }
}
</script>

<style></style>
